EChart 2升级EChart 3注意事项

发表于 | 更新于 | 分类于

本文是根据自己的实践进行总结过来的，是不完全的所有升级注意事项。
如果想直接看结果，请移步到第4部分内容

1.背景

EChart 3是在2015年12月发布的新版本,相比较EChart 2,主要的变化总结如下：

  • 1) 支持了直角坐标系（catesian，同 grid）、极坐标系（polar）、地理坐标系（geo）
  • 2) 移动端的优化,说明白就是将源码体积减小
  • 3) 新增更多图表类型，增加了一些动态效果
  • 4) 更丰富的交互模式
  • 5) EChart 2推荐使用模块化单文件引入，EChart 3可以选择独立文件或者在webpack中使用模块化(在第2部分说明)
  • 6) 异步数据加载与更新(在第3部分说明)。

2 模块/非模块

2.1 EChart 2模块化引入

EChart 2自带有模块化机制，不用使用其它AMD/CMD库就可以require进来echarts提供的模块
EChart 2 引入进来的目录结构：

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                
                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",
                            "data":[5, 20, 40, 10, 10, 20]
                        }
                    ]
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>

2.2 EChart 2非模块化引入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('main')); 
        
        var option = {
            tooltip: {
                show: true
            },
            legend: {
                data:['销量']
            },
            xAxis : [
                {
                    type : 'category',
                    data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    "name":"销量",
                    "type":"bar",
                    "data":[5, 20, 40, 10, 10, 20]
                }
            ]
        };

        // 为echarts对象加载数据 
        myChart.setOption(option); 
    </script>
</body>

2.3 EChart 3模块化引入

通过npm命令安装

1
npm install echarts --save

按需引入 ECharts 图表和组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    title: { text: 'ECharts 入门示例' },
    tooltip: {},
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

2.4 EChart 3非模块化引入

同2.2类似

1
<script src="echarts.min.js"></script>

3.异步数据加载与更新

由于地图模块分辨率变高，为了不增大源码的体积，地图模块采用按照需要下载引入
在地图下载页面,下载需要的世界地图/中国地图/中国分省地图，下载后的格式有js和json两种。
对应js格式的，引入的方式是通过script标签

1
2
3
4
5
6
7
8
9
10
11
<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    series: [{
        type: 'map',
        map: 'china'
    }]
});
</script>

通过JSON格式引入就可以实现异步数据加载与更新

1
2
3
4
5
6
7
8
9
10
$.get('map/json/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
});

4.升级总结

4.1 配置变化举例

EChart 2 EChart 3
option.series.mapLocation 删去，使用left，top，bottom，right定义位置
option.series.textFixed 删去地区的名称文本位置修正
dataRange颜色标识属性(示例4.1-1) visualMap
单个echarts 实例中最多只能存在一个 grid 组件 ECharts 3 中可以存在任意个 grid 组件

一个网格中(示例4.1-2)|
| addData , setSeries 方法设置配置项|统一使用setOption(示例4.1-3)|
|级联this.myChart = ec.init(dom).showLoading({effect:’bubble’}).hideLoading();|不支持|
| myChart.component.tooltip.showTip 这种形式调用相应的接口触发图表行为|dispatchAction(示例4.1-4)|
示例4.1-1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
     dataRange: {
         realtime: false,
         itemHeight: 80,
         splitNumber:6,
         borderWidth:1, 
         textStyle: { color: '#333333' },
         text: ['高', '低'],
         calculable: true
     },
//=======================================================
    visualMap: {
        min: 0,
        max: 1000000,
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
        }
    },

示例4.1-2
图略，官网例子：http://echarts.baidu.com/gallery/editor.html?c=scatter-anscombe-quartet
部分配置属性变化，需要修改

示例4.1-3

1
2
3
4
5
6
7
myChart.setOption({
    visualMap: {
        inRange: {
            color: ...
        }
    }
})//注意最后一定要再次setOption(option);option是配置对象

示例4.1-4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
myChart.on('brushselected', renderBrushed);
setTimeout(function() {
    self.myChart.dispatchAction({
        type: 'brush',
        areas: [{
            geoIndex: 0,
            brushType: 'polygon',
            coordRange: [
                [119.72, 34.85],
                [117.05, 34.06],
                [117.49, 33.75],
                [123.16, 29.92],
                [121.64, 34.08]
            ]
        }]
    });
}, 0);


function renderBrushed(params) { //... ...
}

4.2 第2部分的模块与非模块更改时候需要注意

4.3 地图模块

EChart 2:

1
2
3
4
5
6
chart.setOption({
    series: [{
        type: 'map',
        map: 'china'//'world'
    }]
});

EChart 3，需要下载地图，使用方式见第3部分。